.home {
    $pannel-margin: 10px;
    $pannel-margin-more: 20px;
    $pannel-margin-over: 30px;
    $pannel-padding: 20px;
    $font-normal: 16px;
    $font-middle: 14px;
    $font-small: 12px;
    $small-margin: 6px;
    $font-color1: #333;
    $font-color2: #666;
    $font-color3: #697086;
    &-container {
        width: 100%;
        height: 100%;
        margin: 20px;

        // 组件穿透写最上面
        ::v-deep .el-calendar__header{
            padding: 26px 20px;
        }
        ::v-deep .el-calendar-day{
            height: 40px;
        }
        ::v-deep .el-calendar-table__row td {
            border: none;
        }

        // 公共样式
        .show-title{
            color: #666;
            font-size: $font-normal;
        }
        .show-num{
            margin-top: $pannel-margin;
            color: #333;
            font-size: 24px;
        }
        .special{
            color: #04c9be;
        }
        .panel{
            background-color: #fff;
            margin-bottom: $pannel-margin;
            padding: $pannel-padding;
        }
        .item-header{
            font-size: $font-normal;
            height: 30px;
            line-height: 30px;
        }
        .company-header{
            display: flex;
            .header-right{
                margin-left: 6px;
                .header{
                    font-size: $font-normal;
                    color: #333;
                    i{
                        font-size: $font-small;
                        color: #666;
                        background-color: #f5f6f8;
                        border-radius: 4px;
                        padding: 0 4px;
                    }
                }
                .username{
                    margin-top: $small-margin;
                    font-size: 14px;
                    color: #666;
                    i{
                        margin: 0 $small-margin;
                    }
                }
            }
        }
        .all-show{
            display: flex;
            flex-wrap: wrap;
            margin-top: 20px;
            .el-col{
                width: 140px;
                height: 90px;
            } 
        }
        .home-left{
            
            .company-info{
                height: 350px;
            }
            .quick-access{
                height: 180px;
                .quick-entry{
                    display: flex;
                    justify-content: space-between;
                    height: 100%;
                    .entry-item{
                        align-self: center;                     
                        .entry{
                            width: 40px;
                            height: 40px;
                            margin-bottom: $small-margin;            
                            &-approval{                          
                                background: url(../../assets//common/approval.png) center center;        
                                background-size: cover;               
                            }
                            &-socail{                          
                                background: url(../../assets//common/social.png) center center;        
                                background-size: cover;               
                            }
                            &-role{                          
                                background: url(../../assets//common/role.png) center center;        
                                background-size: cover;               
                            }
                            &-salary{                          
                                background: url(../../assets//common/salary.png) center center;        
                                background-size: cover;               
                            }
                            &-bpm{                          
                                background: url(../../assets//common/bpm.png) center center;        
                                background-size: cover;               
                            }

                        }
                        span{
                            
                            color: $font-color3;
                            font-size: $font-middle;
                        }

                    }
                }
                
            }
            .chart{
                height: 410px;
                .pannel-container{
                    display: flex;
                    .chart-data{
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        width: 50%;
                        height: 100%;
                        .show-title{
                            margin-top: $pannel-margin-over;
                        }
                        .show-bottom{
                            margin-top: $pannel-margin-over;
                            padding: $pannel-padding;
                            background-color: #f5f6f8;
                        }
                    }
                    .echarts{
                        width: 50%;
                        height: 100%;
                    }
                }
            }
        }
        .home-right{
            // background-color: skyblue;
            .el-col{
                // background-color: sandybrown;
                height: 450px;
            }
            .right-bar{
                // width: 380px;
                height: 100%;
                margin-right: $pannel-margin;
                .item-header{
                    margin-bottom: 20px;
                }
                .router-link-active{
                    display: block;
                    width: 100%;
                    height: 54px;
                    line-height: 54px;
                    margin-bottom: 10px;
                    padding-left: 6px;
                    border-radius: 4px;
                    background-color: #f5f6f8;
                    i{
                        margin: $small-margin;
                    }
                }
            }
            .carlendar{
                padding: 20px 0;
                ::v-deep .el-calendar-table thread th{
                    padding: 11px 0;
                }
                ::v-deep .el-button-group{
                    display: flex;
                }
                ::v-deep .el-button-group button:nth-child(2){
                    display: none;
                }
                ::v-deep .el-button--mini span{
                    display: inline-block;
                    width: 5px;
                }

            }
            .notify{
                width: 100%;
                height: 540px;
                margin-top: $pannel-margin;
                background-color: #ec9bad;
            }
        }
    }
  }